<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>个人信息编辑</h2>
        </div>
      </template>
      
      <el-form 
        :model="form" 
        label-width="120px"
        :rules="rules"
        ref="formRef"
      >
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="出生日期" prop="birthdate">
          <el-date-picker
            v-model="form.birthdate"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        
        <el-form-item label="紧急联系人" prop="emergencyContact">
          <el-input v-model="form.emergencyContact"></el-input>
        </el-form-item>
        
        <el-form-item label="紧急联系电话" prop="emergencyPhone">
          <el-input v-model="form.emergencyPhone"></el-input>
        </el-form-item>
        
        <el-form-item label="家庭住址" prop="address">
          <el-input 
            v-model="form.address" 
            type="textarea" 
            :rows="3"
          ></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submit">保存修改</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import http from '@/utils/http.js'
import utils from "@/utils/tools.js";

const form = ref({
  id: null,
  name: '',
  gender: '男',
  birthdate: '',
  phone: '',
  emergencyContact: '',
  emergencyPhone: '',
  address: ''
})

const formRef = ref()
const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  birthdate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  emergencyContact: [{ required: true, message: '请输入紧急联系人', trigger: 'blur' }],
  emergencyPhone: [
    { required: true, message: '请输入紧急联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  address: [{ required: true, message: '请输入家庭住址', trigger: 'blur' }]
}

// 获取用户信息
async function getUserInfo() {
  try {
    const res = await http.get(`/elder/${utils.getCurrentUser().id}`)
    form.value = res.data
  } catch (e) {
    ElMessage.error('获取用户信息失败')
  }
}

// 提交修改
function submit() {
  formRef.value.validate(valid => {
    if (valid) {
      http.put('/elder/update', form.value).then(() => {
        ElMessage.success('修改成功')
        // 更新本地存储的用户信息
        utils.updateUserInfo(form.value)
      })
    }
  })
}

// 重置表单
function resetForm() {
  getUserInfo()
  formRef.value.resetFields()
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.el-input {
  width: 400px;
}
</style> 